<template>
  <div class="wrap">
    <PageHeader class="page-header" />
    <PageMain class="page-main" />
    <SmallWidget />
    <ContextMenu />
    <EditPanel />
  </div>
</template>

<script setup>
import PageHeader from './layouts/PageHeader.vue'
import PageMain from './layouts/PageMain.vue'
import SmallWidget from './components/ControlWidgets.vue'
import ContextMenu from './components/ContextMenu.vue'
import EditPanel from './components/EditPanel.vue'
</script>

<style lang="scss" scoped>
$page-header-height: 5vh;
.wrap {
  height: 100vh;
  .page-header {
    height: $page-header-height;
  }
  .page-main {
    height: calc(100% - $page-header-height);
  }
}
</style>
